<template>
    <div>
        <!-- 搜索框 -->
        <el-card id="search">
            <el-row>
                <el-col :span="20">
                    <el-select v-model="searchModel.project_id" placeholder="请选择项目名称">
                        <el-option v-for="item in searchModel.project_id" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <el-select v-model="searchModel.type" placeholder="请选择税务类型">
                        <el-option label="土地增值税" value="1"></el-option>
                        <el-option label="企业所得税" value="2"></el-option>
                    </el-select>
                    <el-select v-model="searchModel.uid" placeholder="请选择创建人">
                        <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>

                    <el-input v-model="searchModel.keyword" placeholder="请输入关键字查询" clearable></el-input>
                    <el-button type="primary" @click="getUserList" round icon="el-icon-search">查询</el-button>
                </el-col>

                <el-col :span="4" align="right">
                    <el-button type="success" round @click="openEditUI(null)">新增模型</el-button>
                </el-col>
            </el-row>
        </el-card>
        <!-- 搜索框 -->

        <!-- 表格 -->
        <el-card>
            <el-table :data="calculateList" stripe style="width: 100%">
                <el-table-column label="" width="80">
                    <template slot-scope="scope">
                        <!-- 根据页面计算排序 (pageNo-1) * pageSize + index + 1 -->
                        {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="模型名称" width="180">
                </el-table-column>
                <el-table-column prop="contract_title" label="合同名称" width="180">
                </el-table-column>
                <el-table-column prop="project_title" label="项目名称" width="180">
                </el-table-column>
                <el-table-column prop="adduser" label="创建人">
                </el-table-column>
                <el-table-column prop="type" label="税务类型">
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间">
                </el-table-column>
                <el-table-column prop="updated_at" label="更新时间">
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <router-link :to="{ path: '/calculate/detail', query: { id: scope.row.id } }">
                            <el-button type="primary" round>查看详情</el-button>
                        </router-link>
                        <el-button type="primary" @click="openEditUI(scope.row.id)" round>编辑</el-button>
                        <el-button type="primary" @click="openEditUI(scope.row.id)" round>另存</el-button>
                        <el-button type="danger" @click="deleteUser(scope.row)" round>删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </el-card>
        <!-- 表格 -->

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchModel.pageNo" :page-sizes="searchModel.pageSizes" :page-size="searchModel.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 分页 -->


        <!-- 新增模型弹窗 -->
        <el-dialog @close="clearForm" :title="title" id="addUser" :visible.sync="dialogFormVisible">
            <el-form :model="from" ref="calculateFormRef" :rules="rules">
                <el-form-item label="模型名称" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="from.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="税务类型" prop="title" :label-width="formLabelWidth">
                    <el-select v-model="from.type" placeholder="请选择税务类型">
                        <el-option label="土地增值税" value="1"></el-option>
                        <el-option label="企业所得税" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择项目">
                    <el-col :span="20">
                        <template>
                            <el-autocomplete v-model="from.project_title" :fetch-suggestions="querySearchAsync"
                                @select="handleSelect" placeholder="请输入名称">
                            </el-autocomplete>
                        </template>
                    </el-col>
                </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCalculate">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增模型弹窗 -->

    </div>
</template>
  
<script>
import UserApi from '@/api/userManage'
import ProjectApi from '@/api/project'
import CalculateApi from '@/api/calculate'
import calculate from '@/api/calculate';

export default {
    name: 'calculateIndex',
    data() { //数据 创建多个数据
        var isnumber = (rule, value, callback) => {
            var regPos = /^\d+(\.\d+)?$/; //非负浮点数
            var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
            if (regPos.test(value) || regNeg.test(value)) {
                callback();
            } else {
                callback(new Error('请输入数字'));
            }
        };

        return {
            searchModel: {

                pageNo: 1,//页数
                pageSize: 10,
                pageSizes: [5, 10, 20, 50],

            },
            userList: [],
            projectList: [],

            queryString: '',

            total: 0,

            listLoading: true,

            title: '',
            calculateList:[],

            dialogTableVisible: false,
            dialogFormVisible: false,
            from: {
                
            },
            formLabelWidth: '120px',

            rules: {
                username: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
                ],
                gs: [
                    { required: true, message: '工时系数不能为空', trigger: 'blur' },
                    { validator: isnumber, message: '请输入数字', trigger: "blur" },
                ]
            }
        }
    },

    methods: {
        //搜索项目
        querySearchAsync(queryString, cb) {
            clearTimeout(this.timeout);
            var results = []
            if (queryString == '') {
                cb(results);
            } else {
                if (this.queryString != queryString) {
                    this.queryString = queryString

                    ProjectApi.projectKeyword(queryString).then(response => {
                        var result = response.data.list
                        //循环放到一个远程搜索需要的数组
                        for (let i = 0; i < result.length; i++) {
                            const element = result[i];
                            results.push({
                                value: element.title,
                                id: element.id
                            })
                        }
                        cb(results);
                    })

                }

                //掉接口需要的参数
                var find = {
                    keyword: queryString,//上面输入框绑定的数据
                    type: 0
                };

            }
        },
        //点击出现搜索后点击的每一项
        handleSelect(item) {
            this.from.project_id = item.id
        },
        openEditUI(id) {
            if (id == null) {
                this.title = "新增模型";
            } else {
                this.title = "修改模型";
                //根据id获取用户信息
                UserApi.getUserById(id).then(response => {
                    this.userForm = response.data.userInfo;
                })
            }

            this.dialogFormVisible = true;
        },
        handleSizeChange(pageSize) {
            this.searchModel.pageSize = pageSize;
            this.getUserList();
        },
        handleCurrentChange(pageNo) {
            this.searchModel.pageNo = pageNo;
            this.getUserList();
        },
        getUserList() {
            UserApi.getAllUserList(this.searchModel).then(response => {
                console.log(response.data.userList.data);
                this.userList = response.data.userList.data;
                this.total = response.data.userList.total;
            })
        },
        // getAllRoles() {
        //     roleApi.getAllRoles().then(response => {
        //         this.searchModel.role_list = response.data.allRolesList;
        //     })
        // },
        saveCalculate() {
            //触发表单验证
            console.log('submit');
            this.$refs.calculateFormRef.validate((valid) => {
                if (valid) {

                    CalculateApi.saveCalculate(this.from).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                        this.dialogFormVisible = false
                        this.getUserList();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        },
        deleteUser(user) {
            this.$confirm(`此操作将删除 ${user.username}, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                UserApi.deleteUser(user.id).then(response => {
                    this.$message({
                        type: 'success',
                        message: response.message
                    });
                    this.getUserList();
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        clearForm() {
            this.userForm = {};
            this.$refs.calculateFormRef.clearValidate();
        },

        getCalculateList() {
            CalculateApi.getCalculateList(this.searchModel).then(response => {
                this.calculateList = response.data.list.data;
            })
        }
    },

    created() {
        // this.getAllRoles();
        // this.getUserList();
        this.getCalculateList();
    },


}
</script>
  
<style>
#search .el-input {
    width: 200px;
    margin-right: 20px;
}


#addUser input {
    /* width: 150px; */
}
</style>